<template>
    <div class="select_class">
            <header >
                <a @click="$api.goBack()" class="back"></a>
                <span>{{header}}</span>
                <a @click= "finish()"  class="add">完成</a>
            </header>
            <div class="flex_wrap" style="justify-content: center;border:1px solid #f2f2f2;padding:0.4rem 0">
                <input @click="openFromPicker" class="date_pick" v-model="date" disabled  />
                <mt-button @click="openClassPicker()" type="default" size="small" style="margin:0 0.3rem;">{{selectClass}}</mt-button>
            </div>
           <userList :showData='showData' :moreFunction='selectthis' :testType='testType'></userList>
            <mt-popup style="background:white;width:100%;"
            v-model="popupClass"
            position="bottom">
            <div class="picker-toolbar" style="border-bottom:1px solid #f2f2f2">
                <span @click="SureOrCanelSelect(1)" class="mint-datetime-action mint-datetime-cancel">取消</span> 
                <span @click="SureOrCanelSelect()" class="mint-datetime-action mint-datetime-confirm">确定</span>
            </div>
            <mt-picker :slots="slots"  @change="ChangeClass"></mt-picker>
            </mt-popup>
            <mt-datetime-picker v-model='dateFromDate' :class="{no_date:header!='测体温'}" ref="fromDatepicker" type="date" year-format="{value} 年" month-format="{value} 月"
                date-format="{value}" @confirm="changeDate(dateFromDate)" :endDate='new Date()'>
            </mt-datetime-picker>
    </div>
    
</template>

<script>
    import {
        MessageBox
    } from 'mint-ui';
    import userList from "./userListComponent/userListComp";
    export default {
        components: {
            userList
        },
        data() {
            return {
                date: "", //日期,
                popupClass: false, //用来控制班级选择器的显示隐藏
                dateFromDate: "", //过度用日期,无实际作用
                header: sessionStorage.getItem("selectTitle"), //头部显示,根据传进来的参数判断
                pageNum: 1,
                pageSize: 10,
                showData: [],
                classlist: [],
                useInfo: "",
                classId: null,
                selectClass: "", //选中的班级名字,用于匹配班级id
                slots: [{
                    flex: 1,
                    values: [],
                    className: "slot1",
                    textAlign: "center"
                }],

            };
        },
        methods: {
            getUserInfo() {
                this.useInfo = JSON.parse(sessionStorage.getItem("useInfo"));
            },
            ChangeClass(picker, Class) {
                this.selectClass = Class[0];
            },
            changeDate(time) {
                if (this.header == '测体温') {
                    this.date = new Date(time).Format('yyyy-MM-dd');

                } else {
                    this.date = new Date(time).Format('yyyy-MM');
                }

                this.getInfo();
            },
            openFromPicker() {
                //打开时间选择器
                this.$refs.fromDatepicker.open();
            },
            finish() {
                var JSONData = this.showData.map(element => {
                    element.healthType = this.testType;
                    return element;
                }).filter(o => {
                    return o.temperatureType
                })
                var params = {
                    healthList: JSON.stringify(JSONData)
                }
                var url = "/health/save"
                console.log(params);
                this.$api.post(url, params, (data) => {
                    MessageBox('提示', "操作成功");
                    this.$api.clearItem();
                    this.$api.goBack();
                })
            },
            openClassPicker() {
                //打开班级选择器
                this.popupClass = true;
            },
            SureOrCanelSelect(cancel) {
                //班级选择器 确定取消点击事件
                if (!cancel) {
                    this.classlist.forEach(element => {
                        if (element.className == this.selectClass) {
                            this.classId = element.classId;
                            this.className = element.className;
                            this.getInfo();
                        }
                    });
                }
                this.popupClass = false;
            },
            getNowDate() {
                //获取当前时间
                if (this.header == '测体温') {
                    this.date = new Date().Format('yyyy-MM-dd');

                } else {
                    this.date = new Date().Format('yyyy-MM');
                }
                this.dateFromDate = this.$api.formatDate(new Date());
            },
            selectthis(index) {
                //选择更多
                switch (this.header) {
                    case "测体温":
                        this.$router.push({
                            path: "/temperature"
                        });
                        break;
                    case "身高体重":
                        this.$router.push({
                            path: "/heightWeight"
                        });
                        break;
                    case "视力检测":
                        this.$router.push({
                            path: "/eye"
                        });
                        break;

                    default:
                        break;
                }
            },
            getInfo() {
                //获取学生列表
                var url = "/health/listData";
                var params = {
                    schoolId: this.useInfo.schoolId,
                    createTime: this.date,
                    classId: this.classId,
                    healthType: this.testType,
                };
                if (this.header != "测体温") {
                    params.createTime += '-01'
                }
                console.log(JSON.parse(JSON.stringify(params)));
                this.$api.post(url, params, data => {
                    data.info.forEach(o => {
                        if (!o.feverNum) {
                            o.feverNum = 370
                        }
                    })
                    this.showData = data.info;
                    console.log(JSON.parse(JSON.stringify(this.showData)));
                });
            },
            getClassList() {
                //获取班级列表
                var url = "/class/classList";
                var params = {
                    schoolId: this.useInfo.schoolId,
                };

                this.$api.post(url, params, data => {
                    this.classlist = data.info;
                    this.classlist.forEach(element => {
                        this.slots[0].values.push(element.className);
                    });
                    this.classId = this.classlist[0].classId;
                    this.className = this.classlist[0].className;
                    this.getInfo();
                });
            }
        },

        created() {
            this.getUserInfo();
            this.getNowDate(); //获取当前时间
            this.getClassList(); //获取班级列表

        },
        computed: {
            testType() {
                switch (this.header) {
                    case '测体温':
                        return 1;
                        break;
                    case '身高体重':
                        return 2;
                        break;
                    case '视力检测':
                        return 3;
                        break;
                }
            },

        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>